import React, {useContext, useEffect, useState} from 'react';
import {Alert, Dimensions, ImageBackground, Platform, ScrollView, TouchableOpacity, View} from 'react-native';
import {Divider, Input, ListItem, Text} from 'react-native-elements';

import LocaleContext from '../libs/locale';

import ImageA from '../assets/My/a.png';
import ImageB from '../assets/My/b.png';
import ImageC from '../assets/My/c.png';
import ImageD from '../assets/My/d.png';
import right_grey from '../assets/My/right_grey.png'
import WalletContext from "../libs/wallet";
import {constansts} from "../libs/constansts";
import AsyncStorage from "@react-native-async-storage/async-storage";
import {SaveMyID} from "../libs/nodes";

const {width,height,scale} = Dimensions.get("window");

const SetName = ({ navigation }: any) => {
    const locale: any = useContext(LocaleContext);
    const wallet: any = useContext(WalletContext);
    const [Name, setName] = useState(constansts.Name);
    const [refresh, setRefresh] = useState(true);
    const [canSave, setCanSave] = useState(true);

    useEffect(()=>{
        const work = async () => {
            if (!refresh) {
                return;
            }
            // var res = await SaveMyID(wallet.address, Name, "1");
            // setCanSave(true);
            console.log(constansts.Name)
            navigation.setOptions({
                headerRight: () => (
                    <TouchableOpacity style={{
                        width: width / 360 * 50,
                        height: 30,
                        backgroundColor: Name == constansts.Name  ? "#E1E1E1" : "#03C451",
                        marginRight: 15,
                        alignItems: "center",
                        justifyContent: "center"
                    }}
                        onPress={()=>{changeName()}}
                    >
                        <Text style={{color: Name == constansts.Name ? "#B1B1B1" : "#fff"}}> 保存 </Text>
                    </TouchableOpacity>
                ),
            });
            setRefresh(false);
        }
        work();
    },[refresh])

    const changeName = async () => {
        if(Name==constansts.Name )
        {
            return ;
        }
        console.log(constansts.Name+"\n"+Name)
        constansts.Name = Name;
        await AsyncStorage.setItem('@pocketName', Name);
        var res = SaveMyID(wallet.address,Name,"0");
        navigation.goBack();
    }

    return (
       <View>
           <Input
               containerStyle={{marginLeft: -6}}
               // errorMessage={}
               defaultValue={Name}
               value={Name}
               onChangeText={(value) => {setName(value);setRefresh(true)}}
               placeholder={locale?._('SetName.placeHolder')}
               style={{fontSize: 15}}
           />
       </View>
    );
};

export default SetName;
